{% extends "trees/base.html" %}
{% block title %}My Trees - JM3{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">My Trees</h2>
  <a href="{% url 'register_tree' %}" class="btn btn-jm3">+ Add Tree</a>
</div>
<form method="get" class="mb-3">
  <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="🔍 Search by name, species or place…">
</form>

<div class="row g-3">
  {% for tree in trees %}
  <div class="col-12 col-md-6 col-lg-4">
    <a href="{% url 'tree_detail' tree.pk %}" class="text-decoration-none text-dark">
    <div class="card shadow-sm h-100">
      <div class="d-flex">
        <div style="width:96px;height:96px;flex:0 0 96px;background:#eef3ee;border-radius:.375rem 0 0 .375rem;overflow:hidden;">
          {% if tree.photo %}<img src="{{ tree.photo.url }}" style="width:96px;height:96px;object-fit:cover;" alt="">
          {% else %}<div class="d-flex align-items-center justify-content-center h-100" style="font-size:2rem;">🌳</div>{% endif %}
        </div>
        <div class="p-2 flex-grow-1">
          <div class="fw-bold">{{ tree.display_name }}</div>
          <div class="small text-muted">📍 {{ tree.location_alias|default:"—" }}</div>
          <div class="small">🌳 {{ tree.species.common_name|default:"—" }}</div>
          <div class="small">
            <span class="health-{{ tree.health_status }}">●</span>
            {% if tree.last_checked_days is None %}Never checked
            {% elif tree.last_checked_days == 0 %}Checked today
            {% else %}Last checked {{ tree.last_checked_days }}d ago{% endif %}
          </div>
        </div>
      </div>
    </div>
    </a>
  </div>
  {% empty %}
  <div class="col-12 text-center text-muted py-5">
    <div style="font-size:2.5rem;">🌱</div>
    No trees yet. Tap <a href="{% url 'register_tree' %}">Add Tree</a> to plant your first.
  </div>
  {% endfor %}
</div>
{% endblock %}
{% block extra_js %}{% endblock %}